﻿<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
    <title>就业人数统计图标</title>
    <link rel="icon" href="static/favicon.ico" type="image/ico">


    <meta name="author" content="yinqi">
    <link href="static/css/bootstrap.min.css" rel="stylesheet">
    <link href="static/css/materialdesignicons.min.css" rel="stylesheet">
    <link href="static/css/style.css" rel="stylesheet">
    <script th:inline="javascript">
        var basePath = [[${#httpServletRequest.getScheme() + "://" + #httpServletRequest.getServerName() + ":" + #httpServletRequest.getServerPort() + #httpServletRequest.getContextPath()}]];
    </script>
</head>

<body data-logobg="color_8" data-sidebarbg="color_8">
<div class="layout-web">
    <div class="layout-container">
        <!--页面主要内容-->
        <main class="layout-content">

            <div class="container-fluid">

                <div class="row">

                    <div class="col-lg-6">
                        <div class="card">
                            <div class="card-header"><h4>统计图</h4></div>
                            <div class="card-body">
                                <canvas id="chart-line-4" width="400" height="250"></canvas>
                            </div>
                        </div>
                    </div>

                </div>

            </div>

        </main>
        <!--End 页面主要内容-->
    </div>
</div>

<script type="text/javascript" src="static/js/jquery.min.js"></script>
<script type="text/javascript" src="static/js/bootstrap.min.js"></script>
<script type="text/javascript" src="static/js/perfect-scrollbar.min.js"></script>
<script type="text/javascript" src="static/js/Chart.js"></script>
<script type="text/javascript" src="static/js/main.js"></script>
<script type="text/javascript">
    $.ajax({
        url: basePath + "/mCWork",
        contentType: "application/json;charset=UTF-8",
        type: "post",
        dataType: "json",
        success: function (data) {

            let work = [];
            let unWork = [];
            let mClass = [];
            for (let i = 0; i < data.length; i++) {
                work[i] = data[i].id;
                unWork[i] = data[i].ifWork;
                mClass[i] = data[i].personClass;
            }

            new Chart($("#chart-line-4"), {
                type: 'line',
                data: {
                    labels: mClass,
                    datasets: [{
                        label: "就业",
                        fill: false,
                        borderWidth: 3,
                        pointRadius: 4,
                        borderColor: "#36a2eb",
                        backgroundColor: "#36a2eb",
                        pointBackgroundColor: "#36a2eb",
                        pointBorderColor: "#36a2eb",
                        pointHoverBackgroundColor: "#fff",
                        pointHoverBorderColor: "#36a2eb",
                        data: work
                    },
                        {
                            label: "失业",
                            fill: false,
                            borderWidth: 3,
                            pointRadius: 4,
                            borderColor: "#ff6384",
                            backgroundColor: "#ff6384",
                            pointBackgroundColor: "#ff6384",
                            pointBorderColor: "#ff6384",
                            pointHoverBackgroundColor: "#fff",
                            pointHoverBorderColor: "#ff6384",
                            data: unWork
                        }]
                },
                options: {}
            });
        },
        error: function () {
        }
    })

</script>
</body>
</html>